<template>
  <div class="header-filter">
    <div>
      <span class="header-filter-label">
        预处理类型
      </span>
      <el-select
        class="header-filter-select"
        v-model="headerForm.type"
        placeholder="请选择预处理类型"
        @change="changeType"
      >
        <el-option label="全部" value=""> </el-option>
        <el-option label="处理header头" :value="1"> </el-option>
        <el-option label="处理返回结果" :value="2"> </el-option>
      </el-select>
    </div>
    <el-button type="success" @click="addClick">新增</el-button>
  </div>
  <gz-table
    :config="config"
    @handleCurrentChange="handleCurrentChange"
    @handleSizeChange="handleSizeChange"
  >
    <!-- 基本列插槽 -->
    <!-- <template #nameExpand="{ row: scope }">  </template> -->
    <!-- 操作列插槽 -->
    <template #handle="{ row: scope }">
      <el-button type="primary" @click="editClick(scope)">
        编辑
      </el-button>
      <el-button type="danger" @click="removeClick(scope)">
        删除
      </el-button>
    </template>
  </gz-table>

  <el-dialog
    :title="dialog.title"
    v-model="dialogVisible"
    v-if="dialogVisible"
    width="900px"
    @opened="openDialog"
  >
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleFormRef"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="模板名称" prop="name">
        <el-input
          v-model="ruleForm.name"
          autocomplete="off"
          placeholder="请输入模板名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="预处理类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio :label="1">处理header头</el-radio>
          <el-radio :label="2">处理返回结果</el-radio>
        </el-radio-group></el-form-item
      >
      <el-form-item label="模板描述" prop="description">
        <el-input
          type="textarea"
          v-model="ruleForm.description"
          placeholder="请输入模板描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="模板代码">
        <monaco ref="monacoRef" :opts="opts"></monaco>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editSubmit">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs, onMounted, watch } from "vue";
import monaco from "@/components/monaco/index.vue";
import gzTable from "@/components/table/index.vue";
export default {
  components: {
    gzTable,
    monaco
  },
  setup() {
    const monacoRef = ref(false);
    const ruleFormRef = ref(false);
    const dialogVisible = ref(false);
    const state = reactive({
      opts: {
        value: "",
        readOnly: false, // 是否可编辑
        language: "java", // 语言类型
        theme: "vs-dark" // 编辑器主题
      },
      editor: "",
      dialog: {
        title: "新增"
      },
      headerForm: {
        type: "" // 预处理类型
      },
      ruleForm: {
        type: 1
      },
      rules: {
        name: [{ required: true, message: "请输入模板名称", trigger: "blur" }]
      },
      rowId: "", // 每行数据源id
      config: {
        // 表格样式
        style: {
          stripe: true,
          border: true,
          maxHeight: 700
        },
        loading: false,
        // 分页设置
        pagination: {
          current: 1,
          limit: 10,
          total: 0
        },
        // 列
        column: [
          {
            prop: "index",
            type: "index",
            label: "序号",
            width: 50
          },
          {
            prop: "name",
            label: "模板名称",
            width: 250
          },
          {
            prop: "type",
            label: "预处理类型",
            width: 250,
            formatter(value) {
              if (value.type === 1) {
                return "处理header头";
              } else if (value.type === 2) {
                return "处理返回结果";
              }
            }
          },
          {
            prop: "createUser",
            label: "创建人",
            width: 250
          },
          {
            prop: "createdTime",
            label: "创建时间",
            width: 250
          },
          {
            prop: "description",
            label: "模板描述",
            width: 400
          },
          {
            type: "operate",
            label: "操作",
            width: 200,
            fixed: "right",
            slotName: "handle"
          }
        ],
        tableData: []
      }
    });
    onMounted(() => {
      let route = vm.$route.query;
      if (route && route.addDialog) {
        addClick();
      }
      getTableData();
    });
    // 新增/编辑 打开弹窗回调
    const openDialog = () => {
      monacoRef.value.init();
    };
    const getTableData = async (type = "") => {
      try {
        state.config.loading = true;
        let result = await vm.$store.dispatch("GET_JAVA_CODETEMPLATE", {
          limit: state.config.pagination.limit,
          page: state.config.pagination.current,
          type
        });
        state.config.tableData = result.records;
        state.config.pagination.total = result.total;
        state.config.pagination.current = result.current;
        state.config.loading = false;
      } catch (error) {
        console.log(error);
      }
    };
    // 改变预处理类型 筛选表格数据
    const changeType = (value) => {
      state.config.pagination.current = 1;
      getTableData(value);
    };
    // 新增
    const addClick = () => {
      state.dialog.title = "新增";
      dialogVisible.value = true;
      state.ruleForm.name = "";
      state.ruleForm.type = 1;
      state.ruleForm.description = "";
    };
    // 编辑回显数据
    const editClick = (rowData) => {
      state.dialog.title = "编辑";
      let result = vm.$tool.deepClone(rowData);
      state.opts.value = result.code;
      state.rowId = result.id;
      state.ruleForm.name = result.name;
      state.ruleForm.type = result.type;
      state.ruleForm.description = result.description;
      dialogVisible.value = true;
    };
    // 弹框 确定
    const editSubmit = () => {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          if (state.dialog.title == "新增") {
            vm.$axios
              .post("/api/v1/dataengine/codeTemplate/add", {
                code: monacoRef.value.getVal(),
                name: state.ruleForm.name,
                type: state.ruleForm.type,
                description: state.ruleForm.description
              })
              .then((res) => {
                vm.$message.success("新增成功!");
                dialogVisible.value = false;
                getTableData();
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            vm.$axios
              .post("/api/v1/dataengine/codeTemplate/edit", {
                id: state.rowId,
                code: monacoRef.value.getVal(),
                name: state.ruleForm.name,
                type: state.ruleForm.type,
                description: state.ruleForm.description
              })
              .then((res) => {
                vm.$message.success("编辑成功!");
                dialogVisible.value = false;
                getTableData();
              })
              .catch((err) => {
                console.log(err);
              });
          }
        } else {
          return false;
        }
      });
    };
    const removeClick = (rowData) => {
      vm.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let result = await vm.$store.dispatch(
            "DELETE_JAVA_CODETEMPLATE",
            rowData.id
          );
          if (result) {
            vm.$message.success("删除成功!");
            getTableData();
          }
        })
        .catch(() => {
          vm.$message.success("已取消删除!");
        });
    };
    const handleSizeChange = (val) => {
      state.config.pagination.limit = val;
      getTableData();
    };
    const handleCurrentChange = (val) => {
      state.config.pagination.current = val;
      getTableData();
    };
    return {
      monacoRef,
      ruleFormRef,
      dialogVisible,
      ...toRefs(state),
      openDialog,
      getTableData,
      changeType,
      addClick,
      editClick,
      editSubmit,
      removeClick,
      handleSizeChange,
      handleCurrentChange
    };
  }
};
</script>

<style scoped>
.header-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.header-filter-label {
  font-size: 14px;
  color: #606266;
  padding: 0 12px 0 0;
}
.header-filter-select >>> .el-input__inner {
  width: 150px;
}
.edit-form .item-inline {
  width: 50%;
  display: inline-block;
}
.addData-form-pretreatmentCode >>> .el-input__inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.addData-form-pretreatmentCode >>> .el-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: -1px;
}
.CodeMirror-hints {
  z-index: 100 !important;
}
</style>
